<!-- 农技问答 -->
<template>
	<div class="box">
		<div class="title_box">
			<div class="title_box_left">
				<img src="@/assets/home/title-icon.png" alt="">
				<p>农技问答</p>
			</div>
			<div class="search">
				<input type="text" v-model="dataList.search" placeholder="请输入关键词搜索">
				<button @click="search">搜索</button>
			</div>
			<div class="quiz">
				<button @click="tiwen">提问</button>
			</div>
		</div>
		<div class="essay_box">
			<!-- <essay :type="'list'" v-for="(essay,i) in dataList.essayList" :list="essay"></essay> -->

			<div v-if="dataList.essayList.length" class="essayList" v-for="(essay,i) in dataList.essayList" @click="goDetail(essay.qaUuid)">
				<li>
					<img src="@/assets/home/ask.png" alt="">
					<p>{{essay.question}}</p>
				</li>
				<li>
					<img src="@/assets/home//reply.png" alt="">
					<span>
						{{essay.answer}}
					</span>
				</li>
			</div>
			<div class="errorIcon" v-if="!dataList.essayList.length" style="margin-top: 30px;">
				<img src="../../assets/error.png" alt="">
				<p>暂无数据</p>
			</div>
		</div>

		<!-- <div class="paging">
			<el-pagination :pager-count="5" background layout="prev, pager, next" :total="dataList.total"
				:current-page="dataList.page" @current-change="changesize" />
		</div> -->
		<el-dialog v-model="dataList.show" :show-close="false" width="408px" :close-on-click-modal="false">
			<template #header="{ close, titleId, titleClass }">
				<div class="my-header">
					<h4>提问</h4>
					<img src="../../assets/apply/close.png" alt="" @click="tiwen">
				</div>
			</template>
			<div class="my_content">
				<li>
					<p>提问标题：</p>
					<input type="text" placeholder="请输入提问标题" v-model="dataList.qTitle">
				</li>
				<li>
					<p>问题描述：</p>
					<textarea placeholder="请输入问题描述" v-model="dataList.qMsg"></textarea>
				</li>
				<!-- <li class="imgBox">
					<p>添加图片或附件</p>
					<div class="upBox">
						<el-upload v-model:file-list="fileList" action="https://hm.zzhonghu.com/api/common/upload"
						    :data="{type:'image'}" list-type="picture-card"
							:on-preview="handlePictureCardPreview" :on-remove="handleRemove" :limit="3" >
							添加图片
						</el-upload>
					</div>
				</li> -->
				<li class="imgBox">
					<p>添加图片：</p>
					<div class="upBox">
						<div class="imgList" v-for="(img,idx) in dataList.img_list">
							<div class="closeIcon" @click="delateImg(idx)">
								<el-icon>
									<Close />
								</el-icon>
							</div>
							<img :src="img" alt="">
						</div>
						<div @click="addImg" class="addImgIcon">
							<p>添加图片</p>
							<el-icon :size="20">
								<Plus />
							</el-icon>
						</div>
						<input style="opacity: 0;" id="uploder" type="file" @change="getImg">
					</div>
				</li>
				<div class="box_btn">
					<button class="btnS" @click="submitqustion">提交</button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
	import COS from 'cos-js-sdk-v5'
	import essay from '../../components/essay.vue';
	import titleBox from '../../components/titleBox.vue';
	import {
		searchQuestionPage,
		getTxCosCredential,
		askQuestion
	} from '../../api/home.js'
	import {
		reactive,
		ref,
		onBeforeMount
	} from 'vue';
	import {
		useRouter
	} from 'vue-router'
	const router = useRouter()
	const dataList = reactive({
		total: 10,
		page: 1,
		tabId: 1,
		show: false,
		essayList: [],
		search: '',
		img_list: [],
		qTitle: '',
		qMsg: ''
	})
	onBeforeMount(() => {
		getTxCos()
		getsearchQuestionPage()
	})
	const select = (id) => {
		dataList.tabId = id
	}
	const changesize = (value) => {
		dataList.page = value
	}
	const tiwen = () => {
		// return
		dataList.show = !dataList.show
	}
	const goDetail = (id)=> {
		router.push({
			path:'/essayDetail',
			query:{id:id}
		})
	}
	const getsearchQuestionPage = (text) => {
		var data = {
			page: {
				pageNum: 1
			},
			params: {
				question: text ? text : ''
			}
		}
		searchQuestionPage(data).then(res => {
			if (res.data.list) {
				dataList.essayList = res.data.list
			} else {
				dataList.essayList = []
			}

		})
	}
	const search = () => {

		getsearchQuestionPage(dataList.search)
	}
	// 问答提交
	const submitqustion = () => {
		if(!dataList.qTitle){
			ElMessage({
				message: '请输入标题',
				type: 'error',
			})
			return
		}
		if(!dataList.qMsg){
			ElMessage({
				message: '请输入描述',
				type: 'error',
			})
			return
		}
		if(dataList.img_list.length<=0){
			ElMessage({
				message: '请上传图片或附件',
				type: 'error',
			})
			return
		}
		var data = {
			params: {
				attachmentList: dataList.img_list,
				question: dataList.qTitle,
				questionDesc: dataList.qMsg,
				questionUserId: localStorage.getItem('userUuid')
			}

		}
		askQuestion(data).then(res => {
			if(res.code == 200) {
				dataList.qTitle = ""
				dataList.qMsg = ""
				dataList.img_list = []
				tiwen()
			}
			ElMessage({
				message: res.msg,
				type: 'success',
			})
		})
	}


	// 上传图片相关开始
	// 删除图片
	const delateImg = (idx) => {
		dataList.img_list.splice(idx, 1)
	}
	const getImg = (e) => {
		if (dataList.img_list.length > 1) {
			return
		} else {
			var file = e.target.files;
			console.log(file)
			for (var i = 0; i < file.length; i++) {
				uploadFilePromise(file[i])
			}
		}

	}
	const getTxCos = () => {

		var data = {}
		getTxCosCredential(data).then(res => {
			dataList.stsToken = res.data
		})
	}
	const uploadFilePromise = (file) => {
		const cos = new COS({
			getAuthorization: function(option, callback) {
				callback({
					TmpSecretId: dataList.stsToken.credentials.tmpSecretId,
					TmpSecretKey: dataList.stsToken.credentials.tmpSecretKey,
					XCosSecurityToken: dataList.stsToken.credentials.sessionToken,
					ExpiredTime: dataList.stsToken.expiredTime
				})
			}
		})
		uploadFile(cos, file)
	}
	const uploadFile = (cos, file) => {
		cos.putObject({
				Bucket: "cos-1253892290", // 存储桶名称
				Region: 'ap-guangzhou', // 地区
				Key: `/uploads/zizhi/${new Date().getTime()}${file.name}`, // 图片名称
				Body: file,
				onHashProgress: function(progressData) {
					console.log('校验中', JSON.stringify(progressData));
				},
				onProgress: function(progressData) {
					console.log('上传中', JSON.stringify(progressData));
				},
			},
			function(err, data) {
				if (err) {
					// this.error(file)
					return;
				}
				var imgUrl = `http://${data.Location}`
				dataList.img_list.push(imgUrl)
			}
		);
	}
	const addImg = () => {
		var imgup = document.getElementById('uploder')
		document.getElementById('uploder').click()
	}
	// 上传图片相关结束
</script>

<style scoped lang="scss">
	:deep(.el-upload-list--picture-card) {
		margin-left: 18px;

	}

	:deep(.el-upload-list__item),
	:deep(.el-upload--picture-card) {
		width: 100px;
		height: 100px;
	}

	.box {
		min-height: 430px;
	}

	.title_box {
		display: flex;
		align-items: center;
		justify-content: space-between;

		&_left {
			display: flex;
			align-items: center;

			img {
				width: 55px;
			}

			p {
				font-size: 34px;
				font-weight: 600;
				color: #11918E;
				margin-left: 10px;
			}
		}

		.search {
			width: 400px;
			height: 45px;
			background: rgba(17, 145, 142, 0.1);
			border-radius: 5px;
			display: flex;
			align-items: center;

			input {
				border: none;
				outline: medium;
				background-color: rgba(0, 0, 0, 0);
				padding: 12px;
				width: 322px;
			}

			button {
				padding: 6px 20px;
			}
		}

		.quiz {
			button {
				padding: 6px 30px;
			}

		}

		button {
			background: #11918E;
			border-radius: 5px;
			font-size: 16px;
			font-weight: 600;
			color: #FFFFFF;
		}
	}

	.box {
		width: 1200px;
		margin: 30px auto;
		background-color: #FFFFFF;
		border-radius: 10px;
		padding: 30px;
		margin-top: 30px;

		.essay_box {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			min-height: 350px;

			.essayList {
				width: 1140px;
				background: #FFFFFF;
				border-radius: 10px 10px 10px 10px;
				opacity: 1;
				border: 1px solid rgba(17, 145, 142, 0.1);
				padding: 15px;
				margin-top: 30px;
				height: max-content;

				li {
					display: flex;

					img {
						width: 30px;
						height: 30px;
						margin-right: 12px;
					}
				}

				li:last-child {
					margin-top: 16px;
				}
			}
		}

		.tab {
			display: flex;
			justify-content: space-between;
			margin-top: 30px;

			&_item {
				padding: 6px 20px;
				background: #F4F4F4;
				border-radius: 5px;
			}

			.active {
				background: #11918E;
				color: #FFFFFF;
			}
		}
	}

	/* 分页 */
	.paging {
		width: 100%;
		margin-top: 30px;
		display: flex;
		justify-content: center;

		:deep(.is-active) {
			background-color: #11918E !important;
		}
	}

	// 弹窗
	.my-header {
		position: relative;
		display: flex;
		justify-content: center;

		h4 {
			font-size: 26px;
			font-weight: 600;
			color: #11918E;
		}

		img {
			position: absolute;
			right: 0;
			top: 5px;
			width: 35px;
			height: 35px;
		}
	}

	.my_content {
		li {
			display: flex;
			align-items: flex-start;
			margin-bottom: 15px;

			p {
				font-size: 16px;
				font-weight: 400;
				color: #333333;
				margin-top: 10px;
			}

			input,
			textarea {
				border: none;
				outline: medium;
				background-color: #11918E;
				padding: 12px;
				width: 288px;
				background: rgba(17, 145, 142, 0.1);
				border-radius: 5px;
			}

			textarea {
				height: 130px;
			}
		}

		.box_btn {
			display: flex;
			justify-content: center;

			button {
				padding: 6px 60px;
			}
		}

		.imgBox {
			display: flex;
			flex-direction: row !important;

			.upBox {
				display: flex;
				flex-wrap: wrap;
				margin-left: 0 !important;
				max-width: 685px;

				.imgList {
					border: 1px solid #9093997a;
					margin-right: 15px;
					margin-bottom: 15px;
					position: relative;

					.closeIcon {
						width: 20px;
						height: 20px;
						background-color: #9093997a;
						border-radius: 50%;
						position: absolute;
						display: flex;
						justify-content: center;
						align-items: center;
						right: 0;
						top: 0;
					}

					img {
						width: 100px;
						height: 100px;

					}
				}

				.addImgIcon {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 100px;
					height: 100px;
					border: 1px solid #9093997a;

				}
			}
		}
	}
</style>